<template>
  <div>
    <div class="header-container">
      <div class="selector-container">
        <el-select v-model="productTypeValue" placeholder="项目" size="large">
          <el-option
            v-for="item in products"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <div class="selector-option">
              <span>{{ item.name }}</span>
              <div style="flex-grow: 1"></div>
            </div>
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="table-container">
      <el-table :data="apks" style="width: 100%" empty-text="没上传安装包">
        <el-table-column prop="date" label="上传时间" width="200" />
        <el-table-column prop="name" label="文件名" width="180" />
        <el-table-column prop="version" label="版本号" />
        <el-table-column prop="size" label="文件大小" />
        <el-table-column prop="desc" label="描述" />
        <el-table-column prop="file" label="">
          <template #default="scope">
            <el-button
              type="success"
              round
              size="small"
              @click="onDownloadClick(scope.row)"
              >下载
            </el-button>
            <el-popconfirm
              v-if="user.isLogin"
              title="确定要删除该安装包么"
              confirmButtonText="确认"
              cancelButtonText="我再想想"
              @confirm="onDeleteClick(scope.row)"
            >
              <template #reference>
                <el-button type="danger" round size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="table.total"
        :page-size="table.pageSize"
        v-model:currentPage="page"
      />
    </div>
    <el-dialog v-model="downloadDialogVisible" width="360px" center>
      <template #title>
        <div>下载APK</div>
      </template>
      <div class="download-dialog-container">
        <span class="label">方式1:扫码下载</span>
        <div id="downloadQR"></div>
        <span class="label">方式2:下载安装包</span>
        <a :href="downloadOptions.path" :download="downloadOptions.name">
          <el-button type="success" style="text-decoration: none"
            >直接下载
          </el-button>
        </a>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import qrcode from "arale-qrcode";
import auth from "@/storage/auth.js";
import client from "../api/client";
import { ElMessage } from "element-plus";
export default {
  name: "DownloadView",
  components: {
    // Edit, Delete
  },
  created() {
    let _field = this;
    auth.init(function (name) {
      _field.user.isLogin = true;
      _field.user.name = name;
    });
    this.doRefresh();
  },
  props: {},
  data() {
    return {
      downloadDialogVisible: false,
      user: {
        isLogin: false,
        name: "",
      },
      downloadOptions: {
        file: null,
        name: null,
      },
      apks: [],
      products: [],
      table: {
        pageSize: 10,
        total: 100,
      },
      page: 1,
      form: {},
      productTypeValue: null,
    };
  },
  watch: {
    productTypeValue: function (val) {
      let _field = this;
      this.products.forEach(function (value) {
        if (value.id === val) {
          _field.table.total = value.count;
          _field.table.pageSize = value.page;
          if (_field.page !== 1) {
            _field.page = 1;
          } else {
            _field.loadTableData(1);
          }
        }
      });
    },
    page: function (val) {
      this.loadTableData(val);
    },
  },
  methods: {
    onDeleteClick(item) {
      let _field = this;
      client
        .packageDelete({
          id: item.id,
        })
        .then(function (res) {
          if (res.data.code === 200) {
            let response = res.data.response;
            _field.table.total -= 1;
            ElMessage.success(response);
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .finally(function () {
          _field.loadTableData(_field.page);
        });
    },
    doRefresh() {
      let _field = this;
      client.productQuery().then(function (res) {
        if (res.data.code === 200) {
          _field.products = res.data.response;
          if (_field.products.length > 0) {
            _field.productTypeValue = _field.products[0].id;
          } else {
            _field.productTypeValue = null;
          }
        } else {
          ElMessage.error(res.data.message);
        }
      });
    },
    loadTableData(page) {
      let _field = this;
      _field.apks.length = 0;
      client
        .packageQuery({
          page: page,
          id: _field.productTypeValue,
        })
        .then(function (res) {
          if (res.data.code === 200) {
            _field.apks = res.data.response;
          } else {
            ElMessage.error(res.data.message);
          }
        });
    },
    onDownloadClick(item) {
      this.downloadDialogVisible = true;
      let downloadUrl =
        process.env.VUE_APP_URL + "/apk/package/download?id=" + item.id;
      this.downloadOptions = {
        path: downloadUrl,
        name: item.name,
      };
      this.$nextTick(function () {
        let qrnode = new qrcode({
          text: downloadUrl,
          size: 200,
        });
        document.getElementById("downloadQR").innerHTML = "";
        document.getElementById("downloadQR").appendChild(qrnode);
      });
    },
  },
};
</script>
<style scoped>
.header-container {
  padding: 0 120px;
  margin-bottom: 10px;
  display: flex;
  align-items: left;
  justify-content: space-between;
}

.table-container {
  padding: 0 120px;
}

.footer-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding-left: 120px;
  padding-right: 120px;
}

.download-dialog-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.label {
  color: black;
  margin-top: 10px;
  margin-bottom: 10px;
}

a {
  text-decoration: none !important;
}

a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: none;
}

.selector-option {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: space-between;
}
.selector-container {
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
}
.selector-container .label {
  margin-left: 20px;
  height: 40px;
}
</style>
